<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Hot Topic @ Twitter</title>

    <!-- Bootstrap -->
    <link href="../bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bootstrap-3.3.5/datetime/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <!-- Custom styles for this template -->
    <link href="../css/carousel.css" rel="stylesheet">
    <link href="../css/custom.css" rel="stylesheet">
    
  </head>
  <body>
    <nav class="navbar navbar-inverse" style="margin-bottom:0">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
	    <span class="icon-bar"></span>
	    <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Hot Topic @Twitter</a>
       </div>
       <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Hot Topic</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sample 
                <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="dropdown-header">Sample Analysis</li>
                <li><a href="degree.html">Degree Distribution</a></li>
                <li><a href="follow.html">Follow Who</a></li>
                <li><a href="like.html">Like What</a></li>
              </ul>
            </li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    
    
    <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Hot Topics Detection</h1>
              <p>Analyze the data of tweets, split topics, get the frequency of topics, and generate the hot topics.</p>
              <p><a class="btn btn-lg btn-primary" href="list.html" role="button">Hot Topic</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Trend Analysis and Prediction</h1>
              <p>According to the trend of hot topics, predict whether the topics continue to exist or not.</p>
              <p><a class="btn btn-lg btn-primary" href="detail.html" role="button">Trend Analysis</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Social Trust Relations</h1>
              <p>According to the retweet relations, calculate the frequency of the retweets, and acquire the Social Trust Relations.</p>
              <p><a class="btn btn-lg btn-primary" href="follow.html" role="button">RT Who</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Advertisement Injecting</h1>
              <p>Analyze the key words based on the tweets of every user, determine their preferences, and do accurate advertising.</p>
              <p><a class="btn btn-lg btn-primary" href="like.html" role="button">Like What</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- /.carousel -->
    
    
	<div class="container">
	    <form action="" class="form-horizontal"  role="form">
	        <fieldset>
	        <div class="row">
			   	<div class="col-sm-4">
	                <label for="date_from" class="col-md-2 control-label">Date</label>
	                <div class="input-group date form_date col-md-10" data-date="" data-date-format="dd MM yyyy" data-link-field="date_from" data-link-format="yyyy-mm-dd">
	                    <input class="form-control" size="16" type="text" value="" readonly>
	                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
						<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
	                </div>
					<input type="hidden" id="date_from" value="" />
				</div>
	            <div class="col-sm-4">
	           		<button type="submit" class="btn btn-primary">Search</button>
	           	</div>
	        </div>
	        </fieldset>
	    </form>
	</div>
	<br/>
   
	<div class="container">
		<!-- Example row of columns -->
      	<div class="row">
	        <div class="col-sm-4">
          		<div class="list-group">
		            <a class="list-group-item active">
		              Yesterday Top 10
		            </a>
            		<a class="list-group-item">
            			<span class="label label-danger">01</span> Halloween 
            		</a>
		            <a class="list-group-item">
		            	<span class="label label-warning">02</span> Band
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-warning">03</span> Brothers
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">04</span> Reading
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">05</span> NYM
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">06</span> Album
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">07</span> #MadeInTheAM
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">08</span> https://t.co/sdf8d4jeb1
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">09</span> https://t.co/uagg4ntqnf
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">10</span> #TOPdebate
		            </a>
		            <a href="list.html" class="list-group-item">
						<span class="label label-success"> &nbsp;+ </span>&nbsp;More Detail
		            </a>
          		</div>
        	</div><!-- /.col-sm-4 -->
	        <div class="col-sm-4">
          		<div class="list-group">
		            <a href="#" class="list-group-item active">
		              Top 10 of Last Week
		            </a>
            		<a class="list-group-item">
            			<span class="label label-danger">01</span> Halloween 
            		</a>
		            <a class="list-group-item">
		            	<span class="label label-warning">02</span> Angel
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-warning">03</span> #getouthere
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">04</span> https://t.co/pckl9rpdpn
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">05</span> https://t.co/1svkize91p 
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">06</span> #purposealbum
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">07</span> Brothers
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">08</span> Reading
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">09</span> https://t.co/1z72jhqtix
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">10</span> #OptOutside
		            </a>
		            <a href="#" class="list-group-item">
						<span class="label label-success"> &nbsp;+ </span>&nbsp;More Detail
		            </a>
          		</div>
        	</div><!-- /.col-sm-4 -->
        	<div class="col-sm-4">
          		<div class="list-group">
		            <a href="#" class="list-group-item active">
		              Top 10 of Last Month
		            </a>
            		<a class="list-group-item">
            			<span class="label label-danger">01</span> #Oscars 
            		</a>
		            <a class="list-group-item">
		            	<span class="label label-warning">02</span> http://t.co/c9u5notgap
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-warning">03</span> Bradley's  
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">04</span> @Harry_Styles
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">05</span> https://t.co/1phcicyrmm 
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">06</span> Halloween 
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">07</span> Cancer
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">08</span>  https://t.co/1svkize91p
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">09</span> #TheForceAwakens
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">10</span> @real_liam_payne 
		            </a>
		            <a href="#" class="list-group-item">
						<span class="label label-success"> &nbsp;+ </span>&nbsp;More Detail
		            </a>
          		</div>
        	</div><!-- /.col-sm-4 -->
		</div>
		
	</div><!-- /container -->
	
	
	<footer class="footer">
      <div class="container">
        <p class="text-muted" align="center">
            &copy; Project For CMSC5733 Social Computing 2015 @CUHK
        </p>
      </div>
    </footer>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../bootstrap-3.3.5/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="../bootstrap-3.3.5/datetime/jquery-1.8.3.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../bootstrap-3.3.5/datetime/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript">
        $('.form_date').datetimepicker({
		//language:  'fr',
		weekStart: 1,
		todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			minView: 2,
			forceParse: 0
	    });
    </script>
  </body>
</html>
